<template>
    <!--每日一练-->
    <div class="everyday-contain">
        <div class="everyday-title-box">
            <div class="title">
                <i class="icon-calendar"></i>
                <span>每日一练</span>
            </div>
            <div class="float-right">查看更多 >></div>
        </div>
        <ul class="item-list">
            <li v-for="(item,index) in list"
            :key="index">
                <div class="title-box">
                    <div class="title">{{item.pra}}</div>
                    <span class="tag">{{item.bq1}}</span>
                    <span class="tag">{{item.bq2}}</span>
                </div>
                <div class="intro-content">{{item.ques_con}}</div>
            </li>
            <li class="no-data" v-if="list.length===0">暂无数据</li>
        </ul>
    </div>
</template>
<script>
    export default {
        name: 'everydayTopic',
        components: {
            /**/
        },
        data() {
            return {
                list: []
            };
        },
        watch: {
            /**/
        },
        mounted() {
            this.doGetMryl();
        },
        methods: {
            doGetMryl() {
                let option = {
                    pathName: 'doGetMryl',
                    errorFunc: false, // 错误提示处理
                };
                this.$api.ajaxData(option).then(data=>{
                    this.list = data.obj
                }).catch(()=>{
                    this.list = []
                })
            }
        }
    };
</script>
<style scoped lang="scss">
.everyday-contain {
    font-size: 13px;
    color: #333;
    background: #fff;
    border: 1px solid rgb(242, 242, 242);
    .everyday-title-box {
        display: flex;
        padding: 0 10px;
        align-items: center;
        height: 50px;
        .title {
            flex: 1;
            font-weight: 700;
            .icon-calendar {
                display: inline-block;
                width: 20px;
                height: 20px;
                margin-right: 5px;
                background: url("../../assets/image/icon/u365.svg") no-repeat;
                background-size: contain;
                vertical-align: middle;
            }
            span {
                vertical-align: middle;
            }
        }
        .float-right {
            color: #999;
            cursor: pointer;
        }
    }
    .item-list {
        li {
            padding: 10px;
            border-top: 1px solid rgb(242, 242, 242);
            .title-box {
                display: flex;
                margin-bottom: 5px;
                align-items: center;
                .title {
                    font-size: 16px;
                }
                .tag {
                    margin-left: 10px;
                    width: 71px;
                    height: 16px;
                    line-height: 16px;
                    font-size: 12px;
                    color: #999;
                    background: #f2f2f2;
                    border-radius: 3px;
                    text-align: center;
                }
            }
            .intro-content {
                line-height: 1.5;
                color: #999;
                @include ellipsis-line(3);
            }
        }
    }
    .no-data {
        text-align: center;
        color: #999;
    }
}
</style>
